Edit Password Dialog Bug Fix - Flow Diagram
=============================================

BEFORE FIX (Broken Flow)
------------------------
1. Component Mount (dialog hidden)
   ┌─────────────────────────────────┐
   │ EditPasswordDialog              │
   │   open={false}                  │
   │   entry={null}                  │
   │                                 │
   │ useState({ site: '' })  ← Empty │
   └─────────────────────────────────┘

2. User Clicks Edit Button
   ┌──────────────────────────────────┐
   │ setEditingEntry({                │
   │   id: "...",                     │
   │   site: "www.figma.com" ✅       │
   │ })                               │
   └──────────────────────────────────┘

3. React Re-render
   ┌─────────────────────────────────┐
   │ EditPasswordDialog              │
   │   open={true}  ← Changed        │
   │   entry={...}  ← Not changed!   │
   │                                 │
   │ formData.site: ""  ← Still empty│
   │                                 │
   │ useEffect [entry] ← No trigger! │
   │ (entry already set, no change)  │
   └─────────────────────────────────┘

4. Result: Bug! ❌
   ┌─────────────────────────────────┐
   │ Website: [example.com]          │
   │          ↑ placeholder visible  │
   └─────────────────────────────────┘


AFTER FIX (Working Flow)
-------------------------
1. Component Mount (dialog hidden)
   ┌─────────────────────────────────┐
   │ EditPasswordDialog              │
   │   open={false}                  │
   │   entry={null}                  │
   │                                 │
   │ useState({ site: '' })  ← Empty │
   └─────────────────────────────────┘

2. User Clicks Edit Button
   ┌──────────────────────────────────┐
   │ setEditingEntry({                │
   │   id: "...",                     │
   │   site: "www.figma.com" ✅       │
   │ })                               │
   └──────────────────────────────────┘

3. React Re-render
   ┌─────────────────────────────────┐
   │ EditPasswordDialog              │
   │   open={true}  ← Changed ✅     │
   │   entry={...}  ← Set ✅         │
   │                                 │
   │ useEffect [entry, open] ← FIRES!│
   │   ↓                             │
   │   if (entry && open) {          │
   │     setFormData({               │
   │       site: "www.figma.com" ✅  │
   │     })                          │
   │   }                             │
   └─────────────────────────────────┘

4. Result: Fixed! ✅
   ┌─────────────────────────────────┐
   │ Website: [www.figma.com]        │
   │          ↑ actual value shown!  │
   └─────────────────────────────────┘


KEY DIFFERENCE
--------------
BEFORE: useEffect([entry])        ← Only triggers when entry object reference changes
AFTER:  useEffect([entry, open])  ← Triggers when EITHER entry OR open changes

When dialog opens:
- Before: entry already set (no change) → useEffect doesn't fire → form stays empty
- After:  open changes (false → true) → useEffect fires → form populates with data


CODE CHANGES (2 lines)
-----------------------
File: frontend/src/components/vault/edit-password-dialog.tsx

Line 58-65:
- const [formData, setFormData] = useState({
-   site: entry?.site || '',  ❌ Stale initial value
+ const [formData, setFormData] = useState({
+   site: '',                  ✅ Empty initial value
    ...
  })

Line 88:
- }, [entry])                   ❌ Only entry dependency
+ }, [entry, open])             ✅ Both entry AND open dependencies


VERIFICATION CHECKLIST
----------------------
✅ Database has correct data: title = "www.figma.com"
✅ Backend API maps correctly: dbEntry.title → apiEntry.site
✅ Frontend receives correct data: entry.site = "www.figma.com"
✅ Edit handler passes correct entry: handleEditEntry(entry)
✅ Dialog useEffect fires when opened: [entry, open] dependencies
✅ Form populates with actual data: formData.site = "www.figma.com"
✅ Input shows actual value: <Input value="www.figma.com" />
✅ TypeScript compiles: npm run build (success)
